<template>
<div class='container'>
    <el-card>
      <div class="explain-add">
        <span class="explain">说明： 目前仅支持学科和关键字条件筛选</span>
          <el-button
            class="add"
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="goQuestionsNew"
          >
            新增试题
          </el-button>
      </div>
      <!-- 筛选条件 -->
      <el-form :model="screeningConditions" label-width="100px" class="screening-condition">
        <el-form-item label="学科">
          <el-select v-model="screeningConditions.subjectID" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select v-model="screeningConditions.catalogID" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="screeningConditions.tags" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-select v-model="screeningConditions.keyword" placeholder="根据题干搜素">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select v-model="screeningConditions.questionType" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="screeningConditions.difficulty" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select v-model="screeningConditions.direction" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select v-model="screeningConditions.creatorID" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input v-model="screeningConditions.remarks" />
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="screeningConditions.shortName" />
        </el-form-item>
        <!-- 两个下拉选择 -->
        <el-form-item label="城市">
          <el-select v-model="screeningConditions.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
          <el-select v-model="screeningConditions.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item class="screening-button">
          <el-button size="small">清除</el-button>
          <el-button type="primary" size="small">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-alert
        :title="this.questionsList.countsInfo"
        type="info"
        show-icon
        class="tips"
      />
      <my-table
        :table-props="{
          data: this.questionsList.items,
          border: true
        }"
        :columns="[
          { label: '试题编号', prop: 'number',  align: 'center' },
          { label: '学科', prop: 'subjectID', align: 'center' },
          { label: '目录', prop: 'catalog', align: 'center' },
          { label: '题型', prop: 'questionType', align: 'center' },
          { label: '题干', slotName: 'question',  align: 'center' },
          { label: '录入时间', prop: 'addDate',  align: 'center' },
          { label: '难度', prop: 'difficulty', align: 'center' },
          { label: '录入人', prop: 'creator', align: 'center' },
          { label: '操作', slotName: 'operators', width: 200, align: 'center', fixed: 'right' }, // 带插槽
        ]"
      >
        <template v-slot:operators="scope">
          <el-button
            icon="el-icon-view"
            circle
            @click="onViewItem(scope.row)"
            class="preview-button"
          />
          <el-button
            icon="el-icon-edit"
            circle
            @click="onEditItem(scope.row)"
            class="edit-button"
          />
          <el-button
            icon="el-icon-delete"
            circle
            @click="onRemoveItem(scope.row)"
            class="delete-button"
          />
          <el-button
            icon="el-icon-check"
            circle
            @click="onCheckItem(scope.row)"
            class="check-button"
          />

        </template>
        <template v-slot:question="scope">
         <div v-html="scope.row.question" />
        </template>
      </my-table>
    </el-card>
    <!-- 预览弹窗 -->
    <el-dialog title="题目预览" :visible.sync="viewPopupVisible" width="800px">
      <!-- 题型 编号等 -->
      <div class="view-title">
        <span class="title" >【题型】：{{ questionsDetails.questionType }}</span>
        <span class="title" >【编号】：{{ questionsDetails.id }}</span>
        <span class="title" >【难度】：{{ questionsDetails.difficulty }}</span>
        <span class="title" >【标签】：{{ questionsDetails.tags }}</span>
        <span class="title" >【学科】：{{ questionsDetails.subjectID }}</span>
        <span class="title" >【目录】：{{ questionsDetails.directoryName }}</span>
        <span class="title" >【方向】：{{ questionsDetails.direction }}</span>
      </div>
      <!-- 题干 -->
      <div class="view-question">
        <div>【题干】：</div>
        <div
          v-html="questionsDetails.question"
          class="question-color"
        />
        <div v-show="questionsDetails.questionType === '单选题' || questionsDetails.questionType === '多选题'">{{ questionsDetails.questionType }} 选项:(以下选中的选项为正确答案)</div>
        <div class="radio-check-short" v-if="questionsDetails.questionType === '单选题'">
          <!-- 单选 -->
          <el-radio
            v-for="o in questionsDetails.options"
            :key="o.id"
            class="radio-options"
            v-model="o.isRight"
            :disabled="o.isRight === 0"
            :label="o.code"
          >
            {{ o.title }}
          </el-radio>
        </div>
        <div class="radio-check-short" v-else-if="questionsDetails.questionType === '多选题'">
          <!-- 多选 -->
          <el-checkbox
            v-for="o in questionsDetails.options"
            :key="o.id"
            :label="o.title"
            class="radio-options"
            :disabled="o.isRight === 0"
            :checked="o.isRight === 1"
          />
        </div>
      </div>
      <!-- 参考答案 -->
      <div class="video">
        <div>【参考答案】： <el-button type="danger" @click="vidioShow">视频答案预览</el-button> </div>
        <video v-show="videoShow" :src="questionsDetails.videoURL" controls autoplay muted loop width="500" height="300" />
      </div>
      <!-- 答案解析 -->
      <div class="answer">
        <span>【答案解析】：</span>
        <span v-html="questionsDetails.answer" />
      </div>
      <!-- 题目备注 -->
      <div class="answer">
        <span>【答案解析】：</span>
        <span v-html="questionsDetails.remarks" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import * as questionsApi from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      // 筛选条件
      screeningConditions: {
        page: 1, // 当前页数
        pagesize: 10, // 页尺寸
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      },
      // 预览弹窗
      viewPopupVisible: false,
      // 预览弹窗视频显示隐藏
      videoShow: false,
      // 预览弹窗的单选
      viewPopupRadio: '1'
    }
  },
  computed: {
    ...mapState('questions', [
      'questionsList',
      'questionsDetails'
    ])
  },
  methods: {
    ...mapActions('questions', [
      'updateQuestionsList',
      'updateQuestionsDetails'
    ]),
    // 新增试题
    goQuestionsNew () {
      this.$router.push({
        path: '/questions/new'
      })
    },
    // 预览弹窗打开
    onViewItem (row) {
      this.viewPopupVisible = true
      this.updateQuestionsDetails(row)
      console.log(this.questionsDetails.options)
      // 每次预览弹窗视频隐藏
      this.videoShow = false
    },
    // 预览弹窗视频显示/隐藏
    vidioShow () {
      this.videoShow = !this.videoShow
    },
    // 编辑
    onEditItem (row) {
      console.log(row)
    },
    // 删除按钮
    onRemoveItem (row) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await questionsApi.remove(row)
          this.updateQuestionsList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    onCheckItem (row) {
      console.log(row)
    }
  },
  created () {
    this.updateQuestionsList()
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 16px;
  // 说明和新增
  .explain-add {
    display: flex;
    .explain {
      flex: 1;
      color: #ffc0cb;
      font-size: 14px;
    }
    .add {
      width: 100px;
      text-align: right;
    }
  }
  // 筛选条件
  .screening-condition {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    // 筛选按钮
    .screening-button {
      text-align: right;
    }
  }
  .tips {
    margin-bottom: 16px;
  }

  // 预览按钮
  .preview-button {
    background:#ecf5ff;
    color: #409eff;
    border-color: #b3d8ff;
  }
  .preview-button:hover {
    background-color: #409eff;
    color: #e0ebff;
  }

  // 编辑按钮
  .edit-button {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
  }
  .edit-button:hover {
    background-color: #67c23a;
    color: #e0ebff;
  }

  // 删除按钮
  .delete-button {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
  }
  .delete-button:hover {
    background-color: #f56c6c;
    color: #e0ebff;
  }

  // 加入精选按钮
  .check-button {
    color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1;
  }
  .check-button:hover {
    background-color: #e6a23c;
    color: #e0ebff;
  }
  // 预览弹窗
  // 题型等标头
  .view-title {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid #000;
    .title {
      margin: 8px 24px;
    }
  }
  // 题干区域
  .view-question {
    padding: 24px;
    border-bottom: 1px solid #000;
    .question-color {
      color: #0000ff;
    }
    .radio-options {
      display: block;
      margin: 8px 0;
    }
  }
  .video {
    padding: 8px 24px;
    border-bottom: 1px solid #000;
    video {
      margin: 8px 0;
    }
  }
  .answer {
    display: flex;
    padding: 8px 24px;
    border-bottom: 1px solid #000;
    align-items: center;
  }
}
</style>
